/*
 *滑动条构造函数 
 * @prime{
 *    bar:id,               滑动条 id
 *    btn:id,               滑块 id
 *    scrollTrack:id,       滑动条进度 id
 *    ipt:id,               输入框 id
 * }
 * */
function scale(bar, btn, scrollTrack, ipt) {
    this.bar = document.getElementById(bar);
    this.btn = document.getElementById(btn);   
    this.ipt = document.getElementById(ipt);
    this.step = document.getElementById(scrollTrack);
    this.barWidth = this.bar.offsetWidth;
    this.btnWidth = this.btn.offsetWidth
    this.init();
};
// 原型对象
scale.prototype = {
    init: function () {
        this.rangeBar(); // 滑块的滑动事件
        this.inpoutBlur(); // 注册input失去焦点事件
        this.setWidth(this.ipt); // 初始化设置滑动条和滑块
    },
    rangeBar: function () {
        var f = this, g = document, b = window, m = Math;
        var hasTouch = 'ontouchstart' in window,
        startEvent = hasTouch ? 'touchstart' : 'mousedown',
        moveEvent = hasTouch ? 'touchmove' : 'mousemove',
        endEvent = hasTouch ? 'touchend' : 'mouseup',
        cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';        
        f.btn.addEventListener(startEvent, startEventHandel);
        function startEventHandel (e) {
            e.preventDefault();
            e.stopPropagation();
            $(".scrollBarTxt").blur();// inout失去焦点
            var x = hasTouch ? e.changedTouches[0].clientX : e.clientX; 
            var l = this.offsetLeft; 
            var max = f.barWidth - this.offsetWidth;
            var xsd = parseFloat($(f.ipt).val()); // 小数点优化
            var xsdD = xsd - m.floor(xsd);
            f.step.style.transition = 'none'; // 清除过度属性
            f.btn.style.transition = 'none';
            g.addEventListener(moveEvent,moveEventHandle);
            g.addEventListener(endEvent,endEventHandle);
            function moveEventHandle(e) {
                e.preventDefault();
                e.stopPropagation();
                var thisX = hasTouch ? e.changedTouches[0].clientX  : e.clientX;
                var to = m.min(max, m.max(-2, l + (thisX - x)));                
                var posData =  to / max * 100 ;
                 if(posData < 0) {
                     f.ondrag(0, to);
                 } else if (posData == 100) {
                     f.ondrag(100, to);  
                 } else {
                     f.ondrag(m.floor(posData) + xsdD, to);
                 }                                          
                // 改变输入框的数字
                getTotalValue('scrollBarTxt','total_number');                            
            };
            function endEventHandle(e) {
               e.preventDefault();
               e.stopPropagation();
               // 解决滑动过快的小数点过多的问题
               var ipv = parseInt(f.ipt.value);
               if (xsdD > 0 && ipv !== 0 && ipv !== 100) {
                    var newIpv = ipv + xsdD;
                    f.ipt.value = newIpv.toFixed(2) + '%';
               } 
               f.step.style.transition = 'all 0.5s'; // 添加过度属性
               f.btn.style.transition = 'all 0.5s';           
               g.removeEventListener(moveEvent,moveEventHandle);
               g.removeEventListener(endEvent,endEventHandle);                                                                        
            };             
        };                      
    },
    ondrag: function (pos, x) { // 动态设置滑动条和滑块       
        this.btn.style.marginLeft = x + 'px';
        this.step.style.width = x + 'px';       
        if (pos || pos === 0) {
            this.ipt.value = pos + '%'; 
        }                                     
    },
    inpoutBlur: function () { // input 失去焦点
        var that = this;             
        $(that.ipt).off().on("change", function () {             
            that.setWidth(this);                       
       }); 
    },
    setWidth: function (iptDom) { // 根据input的数值 动态设置滑动条和滑块
        var value = 0; 
        var valueStr = $(iptDom).val();
        if(valueStr == '' || valueStr == undefined || valueStr == NaN){
            value = 0;
        } else {
            value = parseFloat(valueStr);
        };                         
        value = value > 100 ? 100 : value;
        value = value < 0 ? 0 : value;
        $(iptDom).val(value + '%');           
        var too = ((this.barWidth-this.btnWidth) * value / 100);                            
        this.ondrag(false , too);
        getTotalValue('scrollBarTxt','total_number');
    }    
}
// 获取总共的百分比
var getTotalValue = function (inpClass, totalId) {
  var scrollBarTxt = $("." + inpClass);
  var totalNumber = $("#" + totalId);
  var number = 0;
  scrollBarTxt.each(function(){         
      number += parseFloat($(this).val());            
  });
  //number >= 100 ? totalNumber.html('100'):totalNumber.html(number.toFixed(2)); 
  totalNumber.html(number.toFixed(2));
}